<?php include '../public/header.php' ?>
<?php include '../public/header_index.php' ?>
<script type="text/javascript" src="/static/admin/echarts/echarts.min.js"></script>
<style>
    .ttt{background-color: #FFFFFF;min-height: 800px;padding: 10px 0;}
    .nei .zuo{float: left;width: calc(100% - 20px);padding-right: 20px}
    .nei .ddbt{font-weight: 700;font-size: 20px;color: #1CA5FF;padding-left: 20px;}
    .nei .xxbt{font-weight: 700;font-size: 16px;padding-bottom: 10px}
    .nei .zuo .xkk{height: 70px;width: calc(16.6% - 22px);margin-left:20px;border: 1px solid #eee;border-radius: 10px;float: left;position: relative}
    .nei .zuo .tu{width: 30px;height: 30px;position: absolute;left: 30px;top: 20px;}
    .nei .zuo .w1{padding-left: 70px;color: #777;margin-top: 12px}
    .nei .zuo .w2{padding-left: 70px;font-size: 20px;font-weight: 700;}
    .nei .zuo .erhbb{margin-top: 20px}
    .nei .zuo .erhxx{margin-top: 20px}
    .nei .zuo .erh{float: left;margin-left: 20px;width: calc(33.33% - 22px);}
    .nei .zuo .eraah{float: left;margin-left: 20px;width: calc(50% - 22px);}
    .nei .zuo .qqtt{border: 1px solid #eee;border-radius: 10px;height: 220px;}
    .nei .zuo .qqttaa{border: 1px solid #eee;border-radius: 10px;height: 280px;}
    .nei .zuo .qtzhan{height: 100px;overflow: hidden;margin-top: 50px;position: relative}
    .nei .zuo .qtzhan div{padding-left: 30px}
    .nei .zuo .qtzhan .kuai{position: relative;top:2px;left:-7px;display: inline-block;width: 15px;height: 15px;}
    .float-l{float: left}
    .wd50{width: 50%}
    .layui-table-tool{display: none}
    .tipss{cursor: pointer;}
</style>
<body class="laytp-container" style="padding: 10px">
<div class="layui-card" id="search-form" style="margin: 0;box-shadow:unset">
    <div class="layui-card-body">
<!--        <form class="layui-form" id="TableSearchFormId" lay-filter="TableSearchForm" onkeydown="keyTableSearch('TableSearchForm', 'datalist')">-->
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-md3">
                        <label class="layui-form-label">年度</label>
                        <div class="layui-input-block">
                            <input type="text" id="year" placeholder="请输入" autocomplete="off" class="layui-input bdate_sea_y">
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <label class="layui-form-label">所属单位</label>
                        <div class="layui-input-block">
                            <div id="chanid" class="xmselect_div">
                                <div class="xmselect_title">请选择</div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item search-div">
                            <div class="layui-form-item layui-inline">
                                <button class="laytp-btn laytp-btn-md laytp-btn-primary" id="listSeaZuo"><i class="layui-icon layui-icon-search"></i>查询</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
<!--        </form>-->
    </div>
</div>
<div class="ttt">
    <div class="nei">
        <div class="zuo">
            <div >
                <div class="xkk">
                    <img class="tu" src="/static/admin/images/entong.png">
                    <div class="w1"><span class="tipss tipss_1">年度新签收入合同金额(元)</span></div>
                    <div class="w2 nianqianshifee">0</div>
                </div>
                <div class="xkk">
                    <img class="tu" src="/static/admin/images/entong.png">
                    <div class="w1"><span class="tipss tipss_2">年度收入合同结算金额(元)</span></div>
                    <div class="w2 nianshijiefee">0</div>
                </div>
                <div class="xkk">
                    <img class="tu" src="/static/admin/images/entong.png">
                    <div class="w1"><span class="tipss tipss_3">年度工程签证金额(元)</span></div>
                    <div class="w2 nianvisafee">0</div>
                </div>
                <div class="xkk">
                    <img class="tu" src="/static/admin/images/entong.png">
                    <div class="w1"><span class="tipss tipss_4">年度产值填报金额(元)</span></div>
                    <div class="w2 nianchanfee">0</div>
                </div>
                <div class="xkk">
                    <img class="tu" src="/static/admin/images/entong.png">
                    <div class="w1"><span class="tipss tipss_5">年度工程回款金额(元)</span></div>
                    <div class="w2 niangchkfee">0</div>
                </div>
                <div class="xkk">
                    <img class="tu" src="/static/admin/images/entong.png">
                    <div class="w1"><span class="tipss tipss_6">年度工程开票金额(元)</span></div>
                    <div class="w2 niankaifee">0</div>
                </div>
                <div style="clear: both"></div>
            </div>
            <div class="erhxx">
                <div class="eraah">
                    <div class="xxbt"><span class="tipss tipss_7">自营项目年度签约趋势</span></div>
                    <div class="qqttaa">
                        <div id="zi_chart_zhezi" style="height: 280px"></div>
                    </div>
                </div>
                <div class="eraah">
                    <div class="xxbt"><span class="tipss tipss_8">联营项目年度签约趋势</span></div>
                    <div class="qqttaa">
                        <div id="zi_chart_zhelian" style="height: 280px"></div>
                    </div>
                </div>
            </div>
            <div style="clear: both"></div>
            <div class="erhbb">
                <div class="erh">
                    <div class="xxbt">合同待回款</div>
                    <div class="qqtt">
                        <div class="wd50 float-l" id="zi_chart_htdhk" style="height: 220px"></div>
                        <div class="wd50 float-l qtzhan htdhk_list">
                            <div style="font-weight: bold;padding-left: 22px">
                                <span><span class="tipss tipss_9">合同总额(元):</span></span>
                                <span class="htdhk_zong">0</span>
                            </div>
                            <div>
                                <span class="kuai" style="background-color: #FAC858;"></span>
                                <span class="tipss tipss_10">回款总额(元):</span>
                                <span class="htdhk_hui">0</span>
                            </div>
                            <div>
                                <span class="kuai" style="background-color: #91CC75;"></span>
                                <span class="tipss tipss_11">合同待回款(元):</span>
                                <span class="htdhk_dai">0</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="erh">
                    <div class="xxbt">结算待回款</div>
                    <div class="qqtt">
                        <div class="wd50 float-l" id="zi_chart_jsdhk" style="height: 220px"></div>
                        <div class="wd50 float-l qtzhan jsdhk_list">
                            <div style="font-weight: bold;padding-left: 22px">
                                <span><span class="tipss tipss_12">结算总额(元):</span></span>
                                <span class="jsdhk_zong">0</span>
                            </div>
                            <div>
                                <span class="kuai" style="background-color: #73C0DE;"></span>
                                <span><span class="tipss tipss_13">回款总额(元):</span></span>
                                <span class="jsdhk_hui">0</span>
                            </div>
                            <div>
                                <span class="kuai" style="background-color: #FD7E55;"></span>
                                <span><span class="tipss tipss_14">结算待回款((元):</span></span>
                                <span class="jsdhk_dai">0</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="erh">
                    <div class="xxbt">开票待回款</div>
                    <div class="qqtt">
                        <div class="wd50 float-l" id="zi_chart_kpdhk" style="height: 220px"></div>
                        <div class="wd50 float-l qtzhan kpdhk_list">
                            <div style="font-weight: bold;padding-left: 22px">
                                <span><span class="tipss tipss_15">开票总额(元):</span></span>
                                <span class="kpdhk_zong">0</span>
                            </div>
                            <div>
                                <span class="kuai" style="background-color: #E87BCA;"></span>
                                <span><span class="tipss tipss_16">回款总额(元):</span></span>
                                <span class="kpdhk_hui">0</span>
                            </div>
                            <div>
                                <span class="kuai" style="background-color: #3BA272;"></span>
                                <span><span class="tipss tipss_17">开票待回款(元):</span></span>
                                <span class="kpdhk_dai">0</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="clear: both"></div>




        </div>
    </div>
</div>
<script>
    const colors = ['#5470C6', '#FAC858', '#91CC75', '#73C0DE', '#FD7E55', '#E87BCA', '#3BA272', '#EE6666'];

    layui.use(["laytp",'laypage','table','dropdown','form','soulTable'], function () {
        var laypage = layui.laypage, table = layui.table, dropdown = layui.dropdown, form = layui.form, soulTable = layui.soulTable;


        $("#listSeaZuo").click(function () {
            var year = $("#year").val();
            var chanid = $("input[name='chanid']").val();
            func_tong_info(year, chanid);
        });



        func_tong_info();
        function func_tong_info(year='', chanid='') {
            facade.ajax({url: ask_contract_shi_tong_info_list, data:{year: year, chanid:chanid}}).done(function(res){
                if (res.code === 2000) {
                    var data = res.data;
                    $(".nianqianshifee").text(parseFormatNum(data.nianqianshifee));
                    $(".nianshijiefee").text(parseFormatNum(data.nianshijiefee));
                    $(".nianvisafee").text(parseFormatNum(data.nianvisafee));
                    $(".nianchanfee").text(parseFormatNum(data.nianchanfee));
                    $(".niangchkfee").text(parseFormatNum(data.niangchkfee));
                    $(".niankaifee").text(parseFormatNum(data.niankaifee));


                    zi_chart_htdhk('zi_chart_htdhk', data.htdhk);
                    $(".htdhk_zong").text(parseFormatNum(data.htdhk.zong));
                    $(".htdhk_hui").text(parseFormatNum(data.htdhk.hui));
                    $(".htdhk_dai").text(parseFormatNum(data.htdhk.dai));

                    zi_chart_jsdhk('zi_chart_jsdhk', data.jsdhk);
                    $(".jsdhk_zong").text(parseFormatNum(data.jsdhk.zong));
                    $(".jsdhk_hui").text(parseFormatNum(data.jsdhk.hui));
                    $(".jsdhk_dai").text(parseFormatNum(data.jsdhk.dai));

                    zi_chart_kpdhk('zi_chart_kpdhk', data.kpdhk);
                    $(".kpdhk_zong").text(parseFormatNum(data.kpdhk.zong));
                    $(".kpdhk_hui").text(parseFormatNum(data.kpdhk.hui));
                    $(".kpdhk_dai").text(parseFormatNum(data.kpdhk.dai));




                    $("#year").val(res.data.is_year);
                    xmselect_dan('chanid', res.data.chanid, res.data.is_chanid)




                    zi_chart_zhezi('zi_chart_zhezi', data.zhe_year, data.zhe_year_shang, data.zhe_zi, data.zhe_zi_shang);
                    zi_chart_zhelian('zi_chart_zhelian', data.zhe_year, data.zhe_year_shang, data.zhe_lian, data.zhe_lian_shang);




                    render_from();
                }
            });
        }





    });




    $(".tipss_1").hover(function(){hhzhu_index = layer.tips('收入合同年度为当前年度的收入合同金额（含补充合同）之和',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_2").hover(function(){hhzhu_index = layer.tips('收入合同结算日期为当前年度的结算金额之和',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_3").hover(function(){hhzhu_index = layer.tips('签证日期为当前年度的签证金额含税合计',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_4").hover(function(){hhzhu_index = layer.tips('产值月份在当前年度的月度产值金额之和',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_5").hover(function(){hhzhu_index = layer.tips('到账日期在当前年度的工程汇款到账金额之和',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_6").hover(function(){hhzhu_index = layer.tips('开票日期在当前年度的工程销项票价税合计之和',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_7").hover(function(){hhzhu_index = layer.tips('自营项目当前年度收入合同金额（含补充合同）按月统计，并与上年度同比',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_8").hover(function(){hhzhu_index = layer.tips('联营项目当前年度收入合同金额（含补充合同）按月统计，并与上年度同比',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_9").hover(function(){hhzhu_index = layer.tips('全部项目收入合同金额（含补充）之和',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_10").hover(function(){hhzhu_index = layer.tips('全部工程回款到账金额之和',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_11").hover(function(){hhzhu_index = layer.tips('=合同金额-回款总额',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_12").hover(function(){hhzhu_index = layer.tips('全部收入合同结算金额之和',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_13").hover(function(){hhzhu_index = layer.tips('全部工程回款到账金额之和',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_14").hover(function(){hhzhu_index = layer.tips('=结算金额-回款总额',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_15").hover(function(){hhzhu_index = layer.tips('全部工程销项票开票的价税合计之和',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_16").hover(function(){hhzhu_index = layer.tips('全部工程回款到账金额之和',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_17").hover(function(){hhzhu_index = layer.tips('=开票总额-回款总额',this,{time:0});},function(){layer.close(hhzhu_index);});






    function zi_chart_zhezi(chat_id, year, year_shang, data, data_shang) {
        console.log(year)
        console.log(year_shang)
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            backgroundColor: '#FFFFFF',
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: [year, year_shang]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },

            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: year,
                    type: 'line',
                    stack: 'Total',
                    smooth: true,
                    data: data
                },
                {
                    name: year_shang,
                    type: 'line',
                    stack: 'Total',
                    smooth: true,
                    data: data_shang
                }
            ]
        };
        mychat.setOption(option);
    }
    function zi_chart_zhelian(chat_id, year, year_shang, data, data_shang) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            backgroundColor: '#FFFFFF',
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: [year, year_shang]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },

            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: year,
                    type: 'line',
                    stack: 'Total',
                    smooth: true,
                    data: data
                },
                {
                    name: year_shang,
                    type: 'line',
                    stack: 'Total',
                    smooth: true,
                    data: data_shang
                }
            ]
        };
        mychat.setOption(option);
    }
    function zi_chart_htdhk(chat_id, data) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            color: [colors[1],colors[2]],
            backgroundColor: '#FFFFFF',
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '80%',
                    data: [
                        {name:'回款总额(元)',value:data.hui},
                        {name:'合同待回款(元)',value:data.dai},
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        mychat.setOption(option);
    }
    function zi_chart_jsdhk(chat_id, data) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            color: [colors[3],colors[4]],
            backgroundColor: '#FFFFFF',
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '80%',
                    data: [
                        {name:'回款总额(元)',value:data.hui},
                        {name:'结算待回款(元)',value:data.dai},
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        mychat.setOption(option);
    }
    function zi_chart_kpdhk(chat_id, data) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            color: [colors[5],colors[6]],
            backgroundColor: '#FFFFFF',
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '80%',
                    data: [
                        {name:'回款总额(元)',value:data.hui},
                        {name:'开票待回款(元)',value:data.dai},
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        mychat.setOption(option);
    }

</script>
</body>
</html>
